<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.container{
			width: 200px;
			height: 20px;
			line-height: 30px;
			margin-top: 15px;
			border: 1px darkolivegreen solid;
			margin: 10px auto;
			padding: 1px;
			text-align: right;
		}
		.c1{
			width: 50%;
			background: blue;
			height: 19px;
			line-height: 19px;
			position: relative;
		}
		.c2{
			width: 80%;
			background: blue;
			height: 19px;
			line-height: 19px;
			position: relative;
		}
		.c3{
			width: 33%;
			background: green;
			height: 19px;
			line-height: 19px;
			position: relative;
		}
	</style>
	<body>
		<center>百分比进度条样式：</center>
		<div class="container">
			<div class="c1">50%</div>
			
		</div>
		<div class="container">
			<div class="c2">80%</div>
		</div>
		<div class="container">
			<div class="c3">33%</div>
		</div>
	</body>
</html>
